<template>
  <div class="c-content" v-if="subcategories.list">
    <div class="item" v-for="(item, index) in subcategories.list" :key="index">
      <a :href="item.link">
        <img :src="item.image" alt="" @load="imageLoad" />
        <span>{{ item.title }}</span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryContent",
  props: {
    subcategories: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      // isLoad: true,
      imgLength: 0,
    };
  },
  methods: {
    imageLoad() {
      // 判断, 所有的图片都加载完了, 那么进行一次回调就可以了.
      // (也可以参考 detail/childComps/DetailGoodsInfo.vue 的方法)
      // this.imgLength++;
      if (++this.imgLength >= this.subcategories.list.length) {
        this.$emit("contentimageLoad");
        this.imgLength = 0;
      }

      /* if (this.isLoad) {
        // 只需要发出一次就行了
        this.$emit("contentimageLoad");
        this.isLoad = false;
      } */
    },
  },
};
</script>

<style scoped>
.c-content {
  width: 100%;
  display: flex;
  /* 不包裹 */
  flex-wrap: wrap;
  /* 均等分 */
  justify-content: space-around;
}
.item {
  width: 28%;
  margin: 8px 0;
  text-align: center;
}
.item img {
  width: 90%;
  margin-bottom: 8px;
}
.item span {
  display: block;
  font-size: 13px;
  border-right: 3px solid var(--color-tint);
  border-left: 3px solid var(--color-tint);
}
.item:nth-child(3n + 2) span {
  border: 0;
}
</style>